<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Animating</title>
		<style type="text/css">
			html{
				height:100%;
				border:solid;
			}
			body{
				overflow:hidden;
				margin:0;
				padding:0;
			}
			div{
				width:50px;
				height:50px;
				background:blue;
				position:absolute;
				top:0;
				left:0;
				color:white;
				}			
		</style>
		<script type="text/javascript" src="animator.js"></script>
		<script type="text/javascript">
		

		var a, x=0, y=0, tx=500, ty=500;
		
		Function.prototype.ready = function(){
			window.addEventListener("load",this,false);
		}
		
		/*Function.prototype.bind = function(e,n){
			n.addEventListener("on"+e,this);
		}*/
		
		(function(){
			a = new Animator(10,null,document.getElementById("box"));
			a.onStart=function(o){
				console.log("Start",o)
			}
			a.onLoop = function(o){
				//o.style.left = Effects.Formules.Bounce(o.offsetLeft, 500, 5.9, 1.3) + "px";
				//console.log(o.offsetLeft, o.offsetTop, tx, ty)
				
				o.style.left = (o.offsetLeft + (x = x * 0.9 + (tx - o.offsetLeft) * 0.9)) + "px";
			}
			a.onFinish=function(o){
				console.log("Finish",o)
			}
		}).ready();
			
			
			document.onclick=function(e){
				tx = e.screenX;
				ty = e.screenY;
				a.run();
			}
			
			
		</script>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>
